<style lang="less">
  @import "./operate";
</style>

<template>
  <div class="home">
    <div class="home-menu">
      <img src="../../assets/home-logo.png" style="width: 160px;height: 50px;position: relative;top: 15px"/>
      <Divider></Divider>
      <menu-navigation></menu-navigation>
    </div>
    <div class="home-header">
      <div class="home-header-login">
        <Row>
          <Col span="21" offset="1" align="left">
            <Breadcrumb>
              <BreadcrumbItem to="/home">
                <Icon type="ios-home-outline"></Icon> Home
              </BreadcrumbItem>
            </Breadcrumb>
          </Col>
          <Col span="2">
            <Button icon="ios-log-out" @click="confirm">退出</Button>
          </Col>
        </Row>
      </div>
      <div class="home-header-tab">
        <Row>
          <Col span="1"><Button icon="ios-arrow-back" style="width: 100%;height: 100%"></Button></Col>
          <Col span="21" style="background-color: #f5f7f9" align="left">
            <router-link to="/home">
              <Tag type="dot">home</Tag>
            </router-link>
          </Col>
          <Col span="1"><Button icon="ios-arrow-forward" style="width: 100%;height: 100%"></Button></Col>
          <Col span="1"><Button icon="ios-close-circle-outline" style="width: 100%;height: 100%"></Button></Col>
        </Row>
      </div>
    </div>
    <div class="home-body">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  import menuNavigation from '../../components/menu-nagivation/menu-navigation.vue'
    export default {
        name: "operate",
      components:{
        menuNavigation,
      },
      data(){
        return{

        }
      },
      methods:{
        login(){
          this.$router.push('/home')
        },
        confirm () {
          this.$Modal.confirm({
            title: '退出登陆',
            width:200,
            content: '<p>确定退出登陆</p>',
            onOk: () => {
              this.$router.push('/');
            },
            onCancel: () => {
              // this.$Message.info('取消');
            }
          });
        }
      }
    }
</script>

<style scoped>

</style>
